<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>博客详情</title>
		<link rel="stylesheet" href="./css/me.css"/>
		<!-- 引入semantic css-->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
	</head>
	<body>
		<!--导航-->
		<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
			<div class="ui container">
				<div class="ui inverted secondary stackable menu">
					<h2 class="ui teal header item">小克的猫爬架</h2>
					<a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
					
					<div class="m-item right item m-mobile-hide">
						<div class="ui input icon">
							<input type="text" placeholder="搜索..."/>
							<i class="search link icon"></i>
						</div>
		
					</div>
				</div>
			</div>
			<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
				<i class="sidebar icon"></i>
			</a>
		</nav>
		
		
		
		
		<!--中间内容-->
		<div class="m-container-small m-padding-tb-big">
			<div class="ui container">
				<!-- 头部 -->
				<div class="ui top attached segment">
					<div class="ui horizontal link list">
						<div class="item">
							<img src="https://picsum.photos/id/237/200/300" alt="" class="ui avatar image"/>
							<div href="#" class="content"><a href="#" class="header">derek</a></div>
						</div>
						<div class="item">
							<i class="calendar icon"></i>2021-10-30
						</div>
						<div class="item">
							<i class="eye icon"></i>212
						</div>
					</div>
				</div>
				<!-- 图片 -->
				<div class="ui attached segment">
					<img src="https://picsum.photos/id/870/200/100?grayscale&blur=2" alt="" class="ui fluid rounded image"/>
				</div>
				<!-- 内容 -->
				<div class="ui attached padded segment">
					<div class="ui right aligned basic segment">
						<div class="ui basic teal left pointing label">标签</div>
						<div class="ui orange label">原创</div>					
					</div>
					<!-- 标题 -->
					<h2 class="ui center aligned header">故乡</h2>
					<!-- 文章内容 -->
					<div id="content" class="m-padded-lr-responsive" >
						故乡
						我冒着严寒，回到相隔二千余里，别了二十余年的故乡去。
						时候既然（1）是深冬；渐近故乡时，天气又阴晦（2）了，冷风吹进船舱中，呜呜的响，从篷隙向外一望，苍黄的天底下，远近横着几个萧索（3）的荒村，没有一些活气。我的心禁不住悲凉起来了。
						阿！这不是我二十年来时时记得的故乡？
						我所记得的故乡全不如此。我的故乡好得多了。但要我记起他的美丽，说出他的佳处来，却又没有影像（4），没有言辞了。仿佛也就如此。于是我自己解释说：故乡本也如此，——虽然没有进步，也未必有如我所感的悲凉，这只是我自己心情的改变罢了，因为我这次回乡，本没有什么好心绪（5）。
						我这次是专为了别他而来的。我们多年聚族而居（6）的老屋，已经公同卖给别姓了，交屋的期限，只在本年，所以必须赶在正月初一以前，永别了熟识的老屋，而且远离了熟识的故乡，搬家到我在谋食（7）的异地去。
						第二日清早晨我到了我家的门口了。瓦楞上许多枯草的断茎当风抖着，正在说明这老屋难免易主的原因。几房的本家大约已经搬走了，所以很寂静。我到了自家的房外，我的母亲早已迎着出来了，接着便飞出了八岁的侄儿宏儿。
						我的母亲很高兴，但也藏着许多凄凉的神情，教我坐下，歇息，喝茶，且不谈搬家的事。宏儿没有见过我，远远的对面站着只是看。
						但我们终于谈到搬家的事。我说外间的寓所（8）已经租定了，又买了几件家具，此外须将家里所有的木器卖去，再去增添。母亲也说好，而且行李也略已齐集，木器不便搬运的，也小半卖去了，只是收不起钱来。
						“你休息一两天，去拜望亲戚本家一回，我们便可以走了。”母亲说。
						“是的。”
					</div>
					<!-- 打赏 -->
					<div class="ui center aligned basic segment">
						<button id="payButton" class="ui orange basic circular button">赞赏</button>
					</div>
					<!-- 二维码 -->
					<div class="ui payQR flowing popup top left transition hidden">
						<div class="ui orange basic label">
							<div class="ui images" style="font-size: inherit !important">
								<div class="image">
									<img src="img/QRcode.png" alt="" class="ui rounded bordered image" style="width: 120px;"/>
									<div class="centered">支付宝</div>
								</div>
							</div>
						</div>
					</div>
					
				</div>
				<!-- 博客信息 -->
				<div class="ui attached positive message">
					<div class="ui middle grid">
						<div class="eleven wide column">
							<ul class="list">
								<li>作者:derek</li>
								<li>时间:d的k</li>
								<li>作者:dereca产生的受到惩罚v发k</li>
								<li>作者:derek</li>
							</ul>
						</div>
						<div class="five wide column">
							<img src="img/QRcode.png" alt="" class="ui right floated rounded bordered image" style="width: 110px;"/>
						</div>
					</div>
				</div>
				<!--  留言区域 -->
				<div class="ui bottom attached segment">
					<div class="ui teal segment">
						<div class="ui comments">
						  <h3 class="ui dividing header">Comments</h3>
						  <div class="comment">
						    <a class="avatar">
						      <img src="/images/avatar/small/matt.jpg">
						    </a>
						    <div class="content">
						      <a class="author">Matt</a>
						      <div class="metadata">
						        <span class="date">Today at 5:42PM</span>
						      </div>
						      <div class="text">
						        How artistic!
						      </div>
						      <div class="actions">
						        <a class="reply">回复</a>
						      </div>
						    </div>
						  </div>
						  <div class="comment">
						    <a class="avatar">
						      <img src="/images/avatar/small/elliot.jpg">
						    </a>
						    <div class="content">
						      <a class="author">Elliot Fu</a>
						      <div class="metadata">
						        <span class="date">Yesterday at 12:30AM</span>
						      </div>
						      <div class="text">
						        <p>This has been very useful for my research. Thanks as well!</p>
						      </div>
						      <div class="actions">
						        <a class="reply">回复</a>
						      </div>
						    </div>
						    <div class="comments">
						      <div class="comment">
						        <a class="avatar">
						          <img src="/images/avatar/small/jenny.jpg">
						        </a>
						        <div class="content">
						          <a class="author">Jenny Hess</a>
						          <div class="metadata">
						            <span class="date">Just now</span>
						          </div>
						          <div class="text">
						            Elliot you are always so right :)
						          </div>
						          <div class="actions">
						            <a class="reply">回复</a>
						          </div>
						        </div>
						      </div>
						    </div>
						  </div>
						  <div class="comment">
						    <a class="avatar">
						      <img src="/images/avatar/small/joe.jpg">
						    </a>
						    <div class="content">
						      <a class="author">Joe Henderson</a>
						      <div class="metadata">
						        <span class="date">5 days ago</span>
						      </div>
						      <div class="text">
						        Dude, this is awesome. Thanks so much
						      </div>
						      <div class="actions">
						        <a class="reply">回复</a>
						      </div>
						    </div>
						  </div>
						  <!-- <form class="ui reply form">
						    <div class="field">
						      <textarea></textarea>
						    </div>
						    <div class="ui blue labeled submit icon button">
						      <i class="icon edit"></i> Add 回复
						    </div>
						  </form> -->
						</div>
					</div>
					<div class="ui form">
						<div class="field">
							<textarea name="comment" placeholder="请输入评论信息..."></textarea>
						</div>
						<div class="fields">
							<div class="field m-mobile-wide m-margin-bottom-small">
								<div class="ui left icon input">
									<i class="user icon"></i>
									<input type="text" name="nickname" placeholder="姓名" required="required"/>
								</div>								
							</div>
							<div class="field m-mobile-wide m-margin-bottom-small">
								<div class="ui left icon input">
									<i class="mail icon"></i>
									<input type="text" name="email" placeholder="邮箱"/>
								</div>	
							</div>
							<div class="field m-mobile-wide">
								<button class="ui teal button m-mobile-wide">
									<i class="edit icon"></i>
									发布
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		
		
		
		<br>
		<br>
		<!--底部 footer-->
		<footer class="ui inverted vertical segment m-padding-tb-massive">
			<div class="ui center aligned container">
				<div class="ui inverted divided stackable grid">
					<div class="three wide column">
						<div class="ui inverted link list">
							<div class="item">
								<img src="./img/QRcode.png" class="ui rounded image" alt="" style="width: 100px;"/>
							</div>
						</div>	
					</div>
					<div class="three wide column">
						<h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
						</div>
					</div>
					<div class="three wide column">
						<h4 class="ui inverted header m-text-thin m-text-spaced">联系方式</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
						</div>
					</div>
					<div class="seven wide column">
						<h4 class="ui inverted header m-text-thin m-text-spaced">derek</h4>
						<p class="m-text-thin m-text-spaced m-opacity-mini">https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.mi</p>
					</div>
				</div>
				<div class="ui inverted section divider"></div>
				<p class="m-text-thin m-text-spaced m-opacity-mini">CopyRight</p>
			</div>		
		</footer>
		
		<!-- 引入semantic js-->
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
		
		<script>
			$('.menu.toggle').click(function(){
				$('.m-item').toggleClass('m-mobile-hide');
			})
			$('#payButton').popup({
				popup : $('.payQR.popup'),
				on : 'click',
				position: 'bottom center'
			})
		</script>
	</body>
	
</html>
